<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <div style="float: right;">
          <el-input style="width: 200px;" class="filter-item" placeholder="请输入关键词" v-model="listQuery.key"></el-input>
          <el-button class="filter-item" type="primary" icon="search" @click="search()">查询</el-button>
        </div>
      </div></el-col>
    </el-row>
    <!-- PGF -->
    <el-col :span="7" style='margin-top:15px;margin-right:10px'>
      <el-card class="box-card">
        <div class="filter-container">
          <el-input placeholder="请输入" v-model="filterText"></el-input>
        </div>
        <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all highlight-current node-key="id" :filter-node-method="filterNode" @node-click="getNodeData" ref="treeData" :expand-on-click-node="false">
        </el-tree>
      </el-card>
    </el-col>
    <el-col :span="16" style='margin-top:15px;margin-left:5px; width:68.5%'>
      <el-card class="box-card">
        <template>
          <el-table border style="width: 100%" :data="pgfdet">
            <el-table-column label="序号" type="index" align="center"></el-table-column>
            <el-table-column label="文档编号" prop="documentNo" align="center"></el-table-column>
            <el-table-column label="文件名称" prop="file.fileName" align="center"></el-table-column>
            <!-- <el-table-column label="文件类型" prop="file.fileType" align="center"> -->
              <template slot-scope="scope">
                {{scope.row.file.fileName.split('.')[1]}}
              </template>
            </el-table-column>
            <el-table-column label="文件大小" prop="file.fileSize" align="center"></el-table-column>
            <el-table-column label="上传日期" prop="file.createTime" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="download(scope.row.file.fileUrl)">
                  下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import * as api from '@/api/product/pcc/index';
// import { getTypeValue } from '@/api/manage/dict/dictValue/index';
export default {
  props: {
    category: {
      type: String, // 1 型号pgf 2 型号qa-doc 3货号pgf
      default: null
    }
  },
  data() {
    return {
      key: '',
      baseUrl: process.env.BASE_FILE_URL,
      filterText: '',
      listQuery: {
        docCategoryId: this.category,
        typeId: this.$route.query.modelPbsId
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      pgfdet: [],
      pgf: {}
    };
  },
  watch: {
    filterText(val) {
      this.$refs.treeData.filter(val);
    }
  },
  created() {
    this.init()
  },
  activated() {
    this.init();
  },
  computed: {
    ...mapGetters(['elements'])
  },
  methods: {
    init() {
      this.listQuery.key = ''
      this.listQuery.id = ''
      this.listQuery.typeId = this.$route.query.modelPbsId
      this.getTreeList();
      this.search()
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 左边的树结构
    getTreeList() {
      api.getdirectorytree(this.listQuery).then(response => {
        this.treeData = response.data;
      });
    },
    // 点击树结构触发
    getNodeData() {
      const node = this.$refs.treeData.getCurrentNode();
      if (this.nodeId === node.id.toString()) {
        return
      }
      this.nodeId = node.id.toString();
      this.listQuery.id = node.id
      this.getResult(this.listQuery)
    },
    download(url) {
      window.open(this.baseUrl + '/' + url);
    },
    getResult(params) {
      api.getfilelist(params)
        .then(response => {
          this.pgfdet = response.data;
          console.log(this.pgfdet)
        });
    },
    // 查询
    search() {
      this.getResult(this.listQuery)
    }
  }
};
</script>
